<template>
  <div>
    <Button @click="back">返回</Button>
    <div>Detail Key:{{ $route.params.key }}</div>
    <router-link :to="{ path: `/sub-detail/${$route.params.key}` }"
      >查看SubDetail</router-link
    >
  </div>
</template>

<script>
import { Button } from "ant-design-vue";
import VueRouter from "vue-router";

export default {
  name: "DetailPage",
  components: {
    Button,
  },
  data() {
    return {
      hasBackHistory: false,
    };
  },
  methods: {
    back() {
      if (this.hasBackHistory) {
        this.$router.back();
      } else {
        this.$router.push({ name: "table-page" });
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    console.log("from", from);
    console.log("to", to);
    next((vm) => {
      vm.hasBackHistory =
        vm.$router.currentNavigateType === "push" &&
        from !== VueRouter.START_LOCATION;
    });
  },
};
</script>

<style></style>
